<template>
  <div>
    <Top />

    <p class="header">用户登录</p>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />

      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
<div class="footer">

    <van-button  plain type="warning" @click="goRegister" size="small">去注册</van-button>
</div>
  </div>
</template>

<script>
/* 

13810270001
13810270002
13810270003
13810270004
13810270005
13810270006
13810270007
13810270008
13810270009
13810270010*/
import { Notify } from "vant";
export default {
  name: "Login",
  data() {
    return {
      phone: "13810270002",
      password: "111111",
      // phone: "",
      // password: "",
    };
  },
  methods: {
    goRegister() {
      this.$router.push("/register");
    },
    async onSubmit(values) {
      //   console.log("submit", values);
      let { phone, password } = this;
      try {
        await this.$store.dispatch("login", { phone, password });
        let url = this.$route.query.redirect || "/home";
        Notify({ type: "success", message: "恭喜大哥登录成功" });
        this.$router.push(url);
      } catch (error) {
        Notify({ type: "warning", message: error });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  text-align: center;
  // color: red;
  font-weight: 700;
}
.footer{
    display: flex;
    justify-content: center;
}
</style>